<template>
  <div class="login_slider">
    <div class="slider-outer" id="j_silder_outer">
      <div
        class="img-item"
        v-for="(item,index) in cds"
        :key="item"
        :style="'transform: rotateX(' + rotateX + 'deg)'">
        <div
          class="img"
          v-for="(item,index) in imageList"
          :key="index"
        >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "login_slider",
    data() {
      return {
        cds: 5,
        po: -160,
        rotateX: 0,
        imageList: [
          {src: ''},
          {src: ''},
          {src: ''},
          {src: ''}
        ]
      }
    },
    created() {
      let timer = setInterval(() => {
        this.next();
      }, 4000)
    },
    methods: {
      next() {
        this.rotateX -= 90
      }
    }
  }
</script>

<style scoped lang="scss">
  .login_slider{
    background-color: #232323;
    width: 100vw;
    height: 100vh;
    .slider-outer{
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      .img-item{
        position: absolute;
        width: 20%;
        height: 100%;
        transition: all 1.5s;
        /*设置子元素在3D空间中呈现*/
        transform-style: preserve-3d;
        /*让图片可以构成一个有四个面的长方体 start*/
        .img{
          width: 100%;
          height: 100%;
          position: absolute;
          background-size: cover;
        }
        .img:nth-child(1){
          background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091203%2Fmqt3xd44apxmqt3xd44apx.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663221260&t=5d9d28b829efffa0eb0cd92e9e5ce9f1) no-repeat;
          transform: rotateX(0deg) translateZ(50vh);
        }
        .img:nth-child(2){
          background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091007%2Fr3kwvogefmjr3kwvogefmj.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663221260&t=dee31331cc5a553ea0b7653ef8e12a0e) no-repeat;
          transform: rotateX(-90deg) translateZ(50vh);
        }
        .img:nth-child(3){
          background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1208%2F1542%2Fntk-1542-31197.jpg&refer=http%3A%2F%2Fimg2.niutuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663221260&t=74e0b9b845c300e38d5f74faca7b7721) no-repeat;
          transform: rotateX(-180deg) translateZ(50vh);
        }
        .img:nth-child(4){
          background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Ff%2F5462cc463dc11.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663221260&t=1a4aabaaf1a73feba64b5c377c4aef62) no-repeat;
          transform: rotateX(-270deg) translateZ(50vh);
        }
        /*让图片可以构成一个有四个面的长方体 end*/
      }
      .img-item:nth-child(1){
        left: 0;
        transition-delay: 0s;
        .img{
          background-position: center left 0;
        }
      }
      .img-item:nth-child(2){
        left: 20%;
        transition-delay: 0.2s;
        .img{
          background-position: center left -20vw;
        }
      }
      .img-item:nth-child(3){
        left: 40%;
        transition-delay: 0.4s;
        .img{
          background-position: center left -40vw;
        }
      }
      .img-item:nth-child(4){
        left: 60%;
        transition-delay: 0.6s;
        .img{
          background-position: center left -60vw;
        }
      }
      .img-item:nth-child(5){
        left: 80%;
        transition-delay: 0.8s;
        .img{
          background-position: center left -80vw;
        }
      }

      /*.btns{
        position: absolute;
        top: 50%;
        width: 100%;
        height: 70px;
        margin-top: -35px;
        .prev,
        .next{
          width: 70px;
          height: 70px;
          line-height: 70px;
          text-align: center;
          background-color: rgba(0,0,0,.3);
          color: #fff;
          font-size: 30px;
          cursor: pointer;
          position: absolute;
        }
        .prev{
          left: 0;
        }
        .next{
          right: 0;
        }
      } */
    }
  }
</style>
